import { Swiper } from 'antd-mobile'
import styles from './index.module.css'
import { useState } from 'react'

export interface BannerItem {
  id: string | number
  image: string
  caption?: string
}

export default function Banner({ items }: { items: BannerItem[] }) {
  const [index, setIndex] = useState(0)
  const currentCaption = items[index]?.caption
  return (
    <div className={styles['home-banner-wrapper']}>
      <Swiper autoplay loop indicator={() => null} onIndexChange={setIndex}>
        {items.map(item => (
          <Swiper.Item key={item.id}>
            <div
              className={styles['home-banner-slide']}
              style={{ backgroundImage: `url(${item.image})` }}
            >
              {currentCaption && (
                <div className={styles['home-banner-caption']}>{currentCaption}</div>
              )}
            </div>
          </Swiper.Item>
        ))}
      </Swiper>
    </div>
  )
}
